<table class="table table-striped table-bordered table-hover">
    <?php if(empty($productList)){echo "<i>Hiện không có sản phẩm nào</i>";} else{ ?>
    <thead>
    <tr>
        <th>#</th>
        <th>Tên sản phẩm</th>
        <th>Hình ảnh</th>
        <th>Ngày đăng</th>
        <th>Trạng thái</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <?php $i = 1; foreach($productList as $objProductList){ $myArr = explode(",", $objProductList->images); ?>
    <tr>
        <td><?php echo $i ?></td>
        <td><a><?php echo $objProductList->product_name ?></a></td>
        <?php if($myArr[0] == '0'){ ?>
        <td><img style="width: 150px; height: 100px" src="<?php echo base_url()?>assets/images/no-garage-image-available.png"></td>
        <?php }else{ ?>
        <td><img style="width: 150px; height: 100px" src="<?php  echo base_url()."uploads/".$myArr[0]; ?>"></td>
        <?php } ?>
        <td><?php echo $objProductList->create_datetime ?></td>
        <td><?php if($objProductList->prActive == 1){echo "Hiển thị";} else{echo "Không hiển thị";} ?></td>
        <td>
            <input type="hidden" id="hiddenEditProductID<?php echo $i ?>" value="<?php echo $objProductList->prID ?>">
            <input type="hidden" id="hiddenEditProductName<?php echo $i ?>" value="<?php echo $objProductList->product_name ?>">
            <input type="hidden" id="hiddenEditProductCode<?php echo $i ?>" value="<?php echo $objProductList->product_code ?>">
            <input type="hidden" id="hiddenEditProductPrice1<?php echo $i ?>" value="<?php echo $objProductList->product_price1 ?>">
            <input type="hidden" id="hiddenEditProductPrice2<?php echo $i ?>" value="<?php echo $objProductList->product_price2 ?>">
            <input type="hidden" id="hiddenEditProductPrice3<?php echo $i ?>" value="<?php echo $objProductList->product_price3 ?>">
            <input type="hidden" id="hiddenEditProductPrice4<?php echo $i ?>" value="<?php echo $objProductList->product_price4 ?>">
            <input type="hidden" id="hiddenEditPriceUnit<?php echo $i ?>" value="<?php echo $objProductList->price_unit ?>">
            <input type="hidden" id="hiddenEditProductSpec<?php echo $i ?>" value='<?php echo $objProductList->specifications ?>'>
            <input type="hidden" id="hiddenEditProductImg<?php echo $i ?>" value="<?php echo $objProductList->images ?>">
            <input type="hidden" id="hiddenEditProductDoc<?php echo $i ?>" value='<?php echo $objProductList->documents ?>'>
            <input type="hidden" id="hiddenEditProductDes<?php echo $i ?>" value='<?php echo $objProductList->prDes ?>'>
            <input type="hidden" id="hiddenEditProductActive<?php echo $i ?>" value="<?php echo $objProductList->prActive ?>">
            <input type="hidden" id="hiddenEditProductCatID<?php echo $i ?>" value="<?php echo $objProductList->id_category ?>">

            <a style='cursor: pointer' class='btn btn-warning btn-xs pull-right' onclick="setValueUpdateProduct($('#hiddenEditProductID<?php echo $i ?>').val(), $('#hiddenEditProductName<?php echo $i ?>').val()
                , $('#hiddenEditProductCode<?php echo $i ?>').val(), $('#hiddenEditProductPrice1<?php echo $i ?>').val(), $('#hiddenEditProductPrice2<?php echo $i ?>').val(), $('#hiddenEditProductPrice3<?php echo $i ?>').val()
                , $('#hiddenEditProductPrice4<?php echo $i ?>').val(), $('#hiddenEditPriceUnit<?php echo $i ?>').val(), $('#hiddenEditProductSpec<?php echo $i ?>').val()
                , $('#hiddenEditProductImg<?php echo $i ?>').val(), $('#hiddenEditProductDoc<?php echo $i ?>').val(), $('#hiddenEditProductDes<?php echo $i ?>').val()
                , $('#hiddenEditProductActive<?php echo $i ?>').val(), $('#hiddenEditProductCatID<?php echo $i ?>').val())">
                <span class='glyphicon glyphicon-pencil'></span>
            </a>
            <a class='btn btn-danger btn-xs pull-right' onclick="deleteProduct('<?php echo $objProductList->prID ?>')"><span class='glyphicon glyphicon-remove'></span></a>
        </td>
    </tr>
    <?php $i++; } ?>
    </tbody>
    <?php } ?>
</table>

<!-- input Edit Control Panel -->
<div class="row light" id="lightEditProduct" style="width: 70%; height: inherit; left: 24%; top: 11%;">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Cập Nhật Sản Phẩm</h3>
        </div>
        <div class="panel-body">
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3">Danh mục cập nhật sản phẩm:</div>
                <div class="col-lg-8" id="divEditSelectedCat1" style="height: 120px; overflow: auto; border: 1px solid deepskyblue; padding-top: 5px;"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3">Danh mục đã chọn:</div>
                <div class="col-lg-8" id="divEditSelectedCat2" style="color: blue; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Tên sản phẩm:</span></div>
                <div class="col-lg-8"><input id="txtEditProductName" class="form-control" type="text"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Mã sản phẩm:</span></div>
                <div class="col-lg-8"><input id="txtEditProductCode" class="form-control" type="text"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Giá:</span></div>
                <div class="col-lg-8">
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-3">
                            <span><b>10ml</b></span>
                        </div>
                        <div class="col-lg-6">
                            <input id="txtEditMoney1" class="form-control" type="text" value="0" onkeyup="moneyStringEdit(this.id, 'divEditMoney1')" onkeypress='validate(event);'>
                        </div>
                        <div class="col-lg-3" id="divEditMoney1" style="font-weight: bold; color: red; overflow: auto;">
                            <span>0 VND</span>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-3">
                            <span><b>30ml</b></span>
                        </div>
                        <div class="col-lg-6">
                            <input id="txtEditMoney2" class="form-control" type="text" value="0" onkeyup="moneyStringEdit(this.id, 'divEditMoney2')" onkeypress='validate(event);'>
                        </div>
                        <div class="col-lg-3" id="divEditMoney2" style="font-weight: bold; color: red; overflow: auto;">
                            <span>0 VND</span>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-3">
                            <span><b>50ml</b></span>
                        </div>
                        <div class="col-lg-6">
                            <input id="txtEditMoney3" class="form-control" type="text" value="0" onkeyup="moneyStringEdit(this.id, 'divEditMoney3')" onkeypress='validate(event);'>
                        </div>
                        <div class="col-lg-3" id="divEditMoney3" style="font-weight: bold; color: red; overflow: auto;">
                            <span>0 VND</span>
                        </div>
                    </div>
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-3">
                            <span><b>100ml</b></span>
                        </div>
                        <div class="col-lg-6">
                            <input id="txtEditMoney4" class="form-control" type="text" value="0" onkeyup="moneyStringEdit(this.id, 'divEditMoney4')" onkeypress='validate(event);'>
                        </div>
                        <div class="col-lg-3" id="divEditMoney4" style="font-weight: bold; color: red; overflow: auto;">
                            <span>0 VND</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3">
                            <span><b>Đơn vị tiền tệ</b></span>
                        </div>
                        <div class="col-lg-9">
                            <select id="slEditUnit" class="form-control" style="width: 20%" onchange="changeCurrencyEdit();">
                                <option value="VND">VND</option>
                                <option value="USD">USD</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Mô tả:</span></div>
                <div class="col-lg-8"><textarea id="txtEditSpec" class="form-control" type="text" value="0"></textarea></div>
            </div>
            <div class="row" style="margin-top: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3">Hình ảnh đã được tải: </div>
                <div class="col-lg-8" id="imgEditPreviewProductCurrent" style="border: 1px solid deepskyblue; padding: 5px;"></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3"><span>Tải thêm hình ảnh:</span></div>
                <div class="col-lg-8">
                    <div class="row" id="imgEditPreviewProduct"></div>
                    <form id="frmEditUploadProduct" action="<?php echo base_url() ?>admin_product/edit_upload" method="POST" enctype="multipart/form-data">
                        <input class="form-control" type="file" name="productEditFile[]" onclick="$('#uploadEditProduct').html('');" multiple>
                        <input type="submit" name="submit" value="Upload" class="form-control btn btn-success" onclick="fileMultiUpload(this.form, '<?php echo base_url() ?>admin_product/edit_upload', 'uploadEditProduct', 'imgEditPreviewProduct'); return false;"/>
                    </form>
                    <div id="uploadEditProduct"></div>
                </div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3"><span>Tài liệu & Video:</span></div>
                <div class="col-lg-8"><textarea name="txtEditDocuments" id="txtEditDocuments"></textarea></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"><span style="color: red">* </span></div>
                <div class="col-lg-3"><span>Mô tả chi tiết:</span></div>
                <div class="col-lg-8"><textarea name="txtEditDescription" id="txtEditDescription"></textarea></div>
            </div>
            <div class="row" style="margin: 5px;">
                <div class="col-lg-1"></div>
                <div class="col-lg-3"></div>
                <div class="col-lg-8">
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckboxEditAdminPro" checked> Hiển thị
                    </label>
                </div>
            </div>
            <div class="row" style="text-align: center; margin: 5px">
                <input type="hidden" id="hiddenEditProductID">
                <input type="hidden" id="hiddenEditProductCodeCurrent">
                <input type="hidden" id="hiddenEditCategoryProduct">
                <input type="hidden" id="hiddenEditProductImages">
                <input type="hidden" id="hiddenEditProductDelImages">
                <input type="button" style="margin: 5px" class="btn btn-success" value="Cập nhật" onclick="updateProduct()">
                <input type="button" style="margin: 5px" class="btn btn-success" value="Đóng cửa sổ" onClick="lightbox_close('lightEditProduct', 'fadeEditProduct');">
            </div>
        </div>
    </div>
</div>
<div class="row-fluid fade" id="fadeEditProduct" onClick="lightbox_close('lightEditProduct', 'fadeEditProduct');"></div>
<!-- end Edit Control Panel -->

<script>
    function setValueUpdateProduct(id, name, code, price1, price2, price3, price4, unit, spec, images, doc, des, active, catID){
//        alert(price1);
        var url = "<?php echo base_url() ?>";
        $.ajax({
            url: url+"admin_product/emptyImageEdit",
            success: function(x){
//                alert(x);
                if(x == ''){
                    $('#uploadEditProduct').html("Chọn hình ảnh để upload...");
                    $('#imgEditPreviewProduct').html('');

                    $('#frmEditUploadProduct')[0].reset();

                    getEditCategoryNews(0);

                    $('#hiddenEditProductID').val(id);
                    $('#hiddenEditProductCodeCurrent').val(code);
                    $('#hiddenEditCategoryProduct').val(catID);
                    $('#hiddenEditProductImages').val(images);

                    $('#txtEditProductName').val(name);
                    $('#txtEditProductCode').val(code);
                    $('#txtEditMoney1').val(price1);
                    $('#txtEditMoney2').val(price2);
                    $('#txtEditMoney3').val(price3);
                    $('#txtEditMoney4').val(price4);
                    $('#slEditUnit').val(unit);
                    $('#txtEditSpec').val(spec);

                    CKEDITOR.instances.txtEditDocuments.setData(doc);
                    CKEDITOR.instances.txtEditDescription.setData(des);

                    getEditSubCategoryNews(catID);
                    changeCurrencyEdit();

                    if(active == 0){
                        $('#inlineCheckboxEditAdminPro').prop("checked", false);
                    }
                    else{
                        $('#inlineCheckboxEditAdminPro').prop("checked", true);
                    }

                    if(images != ''){
                        $("#imgEditPreviewProductCurrent").html('');
                        var myArr = images.split(",");
                        for(var i = 0; i < myArr.length - 1; i++){
                            $("#imgEditPreviewProductCurrent").append('<div class="col-lg-3" style="position: relative"><img style="width: 120px; height: 100px; margin: 5px;" src="<?php echo base_url() ?>uploads/'+myArr[i]+'"'+'><a style="cursor: pointer" onclick="deleteProductImage('+"'"+myArr[i]+"'"+')"><img src="<?php echo base_url() ?>assets/images/delete_icon.png" style="position: absolute; top: 4px; right: 5px"/></a></div>');
                        }
                    }
                    else{
                        $("#imgEditPreviewProductCurrent").html('<i>Hiện sản phẩm này chưa có hình ảnh. Xin vui lòng chọn hình ảnh và bấm vào nút upload bên dưới để cập nhật hình ảnh cho sản phẩm này...</i>');
                    }

                    lightbox_open('lightEditProduct', 'fadeEditProduct');
                }
                else{
                    alert("Xin vui lòng tải lại trình duyệt và thử lại...");
                }
            }
        });
    }

    function updateProduct(){
        var id = $('#hiddenEditProductID').val();
        var productName = $('#txtEditProductName').val();
        var productCode = $('#txtEditProductCode').val();
        var productCodeCurrent = $('#hiddenEditProductCodeCurrent').val();
        var productPrice1 = $('#txtEditMoney1').val();
        var productPrice2 = $('#txtEditMoney2').val();
        var productPrice3 = $('#txtEditMoney3').val();
        var productPrice4 = $('#txtEditMoney4').val();
        var priceUnit = $('#slEditUnit').val();
        var specifications = $('#txtEditSpec').val();
        var documents = CKEDITOR.instances.txtEditDocuments.getData();
        var description = CKEDITOR.instances.txtEditDescription.getData();
        var subCategoryID = $("#hiddenEditCategoryProduct").val();
        var images = $('#hiddenEditProductImages').val();
        if(images == 0){
            images = "";
        }
        var imagesDel = $('#hiddenEditProductDelImages').val();

        var active = 1;
        if(!$('#inlineCheckboxEditAdminPro').is(':checked') ){ //kiem tra neu checkbox khong duoc check
            active = 0;
        }

        var url = "<?php echo base_url() ?>";
        var dataString = "id="+id+"&productName="+productName+"&productCode="+productCode+"&productPrice1="+productPrice1+"&productPrice2="+productPrice2+"&productPrice3="+productPrice3+"&productPrice4="+productPrice4
            +"&priceUnit="+priceUnit+"&specifications="+specifications+"&documents="+documents+"&description="+description+"&subCategoryID="+subCategoryID+"&active="+active+"&productCodeCurrent="+productCodeCurrent+"&images="+images;
//        alert(dataString);

        if(subCategoryID == '' || productName == '' || productCode == '' || productPrice1 == '' || productPrice2 == '' || productPrice3 == '' || productPrice4 == '' || specifications == '' || description == ''){
            alert("Các thông đánh dấu * là các thông tin bắc buộc!")
        }
        else{
            $.ajax({
                type: "POST",
                url: url+"admin_product/updateProduct",
                data: dataString,
                success: function(x){
//                    alert(x);
                    if(x == 0){
                        alert("Cập nhật sản phẩm thành công!");
                        lightbox_close('lightEditProduct', 'fadeEditProduct');
                        getTableProductManager(1);
                        getPage();
                    }
                    else{
                        alert(x);
                    }
                }
            });
        }
    }

    function getEditCategoryNews(id){
        var url = "<?php echo base_url() ?>";
        $.ajax({
            url: url+"admin_product/getEditParentCategory/"+id,
            success: function(x){
//                alert(x);
                $('#divEditSelectedCat1').html(x);
            }
        });
    }

    function getEditSubCategoryNews(id){
        var id = id;
        //alert(id);
        $('#hiddenEditCategoryProduct').val(id);
        if(id != '0'){
            var url = "<?php echo base_url() ?>";
            var dataString = "id="+id;
            $.ajax({
                type: "POST",
                url: url+"admin_category/getSubCategoryNews",
                data: dataString,
                success: function(x){
                    //alert(x);
                    $('#divEditSelectedCat2').html(x);
                }
            });
        }
        else{
            $('#divSelectedCat2').html("");
        }
    }

    function deleteProduct(id){
        //alert(id);
        var check = confirm("Bạn chắc chắn muốn xóa?");
        if(check == true){
            var id = id;
            var url = "<?php echo base_url() ?>";
            var dataString = "id="+id;

            $.ajax({
                type: "POST",
                url: url+"admin_product/deleteProduct",
                data: dataString,
                success: function(x){
                    //alert(x);
                    if(x == '0'){
                        getTableProductManager(1);
                        getPage();
                    }
                    else{
                        alert(x);
                    }
                }
            });
        }
        else{
            return;
        }
    }

    function deleteProductImage(image){
        var imageDel = image+","; //chuoi hinh anh duoc yeu cau xoa
//        alert(imageDel);
        var images = $('#hiddenEditProductImages').val(); //chuoi hinh anh hien tai
//        alert(images);
        var after = images.replace(imageDel, ''); // chuoi hinh anh sau khi xoa
//        alert(after);

        var imagesDelCurrent = $('#hiddenEditProductDelImages').val(); //chuoi gia tri cac hinh anh can xoa da duoc luu lai
        $('#hiddenEditProductDelImages').val(imagesDelCurrent+imageDel); //gan them gia tri

        $('#hiddenEditProductImages').val(after); //gan lai chuoi hinh anh hien tai sau khi xoa

        //hien thi lai hinh anh sau khi xoa
        $("#imgEditPreviewProductCurrent").html('');
        var myArr = after.split(",");
        for(var i = 0; i < myArr.length - 1; i++){
//            alert(myArr[i]);
            $("#imgEditPreviewProductCurrent").append('<div class="col-lg-3" style="position: relative"><img style="width: 120px; height: 100px; margin: 5px;" src="<?php echo base_url() ?>uploads/'+myArr[i]+'"'+'><a style="cursor: pointer" onclick="deleteProductImage('+"'"+myArr[i]+"'"+')"><img src="<?php echo base_url() ?>assets/images/delete_icon.png" style="position: absolute; top: 4px; right: 5px"/></a></div>');
        }
    }
</script>

<script>
    function validate(evt) {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode( key );
        var regex = /[0-9]/;
        if( !regex.test(key) ) {
            theEvent.returnValue = false;
            if(theEvent.preventDefault) theEvent.preventDefault();
        }
    }

    function moneyStringEdit(id, div){
        var n = parseInt($('#'+id).val().replace(/\D/g,''),10);
        var unit = $('#slEditUnit').val();
        if(isNaN(n)){
            n = 0;
        }
        $('#'+div).html(""+ n.toLocaleString() + " "+unit);
    }

    function changeCurrencyEdit(){
        moneyStringEdit('txtEditMoney1', 'divEditMoney1');
        moneyStringEdit('txtEditMoney2', 'divEditMoney2');
        moneyStringEdit('txtEditMoney3', 'divEditMoney3');
        moneyStringEdit('txtEditMoney4', 'divEditMoney4');
    }
</script>

<script>
//    $w.a('txtEditContentNews');
CKEDITOR.replace( 'txtEditDocuments' );
CKEDITOR.replace( 'txtEditDescription' );

</script>